// 写立即执行函数是为了让整个js环境没有混乱的全局变量
(function () {
    var carousel = document.getElementById('carousel-list');
    var rightbtn = document.getElementById('rightbtn');
    var leftbtn = document.getElementById('leftbtn');
    var banner =document.getElementById('banner')
    // 克隆第一张li
    // var cloneli=carousel.firstElementChild.cloneNode(true);
    var clone_li = carousel.firstElementChild.cloneNode(true);
    carousel.appendChild(clone_li);

    var circleOl=document.getElementById('circles');
    var circlesLis=circleOl.getElementsByTagName('li')


    // 设置锁
    var lock=true;

    var idx = 0;

    // 添加右按钮的点击监听
    rightbtn.onclick = rightOnlick;
    function rightOnlick() {
        // 看锁是否在
        if(!lock) return;
        lock=false
        // 重新设置动画
        carousel.style.transition = 'transform 0.5s ease 0s'
        idx++;
        carousel.style.transform = 'translateX(' + -16.66 * idx + '%)';
        // 当最后一张的时候
        if (idx > 4) {
            setTimeout(function () {
                // 清除style属性
                carousel.style.transform = '';
                carousel.style.transition = '';
                idx = 0;
            }, 500)
        }

        setCircle();
        // 动画结束后开锁
        setTimeout(function(){
            lock=true;
        },500)
    };

    // 左按钮
    leftbtn.onclick = function () {
        if(!lock) return;
        lock=false;
        // 先不能设置idx，万一idx刚好是0呢
        if (idx == 0) {
            carousel.style.transition = 'none';
            carousel.style.transform = 'translateX(' + -16.66 * 5 + '%)';

            idx=4;

            // 这里要设置0秒的延迟
            setTimeout(function () {
                // 重新设置动画
                carousel.style.transition = 'transform 0.5s ease 0s';
                carousel.style.transform = 'translateX(' + -16.66 * 4 + '%)';

            },0)
        }else{
            idx--;
            carousel.style.transform = 'translateX(' + -16.66 * idx + '%)';
        }
        setCircle();
        setTimeout(function(){
            lock=true;
        },500)
    }

    // 设置圆点的current类属性
    function setCircle(){
        for(i=0;i<=4;i++){
            if(i==idx%5){
                circlesLis[i].className='current';
            }else{
                circlesLis[i].className='';
            }
        }
    };

    // 点击小圆点触发轮播
    circleOl.onclick=function(e){
        // 如果点击的是li的话
        if(e.target.tagName.toLowerCase()=='li'){
            // 获取当前是点击到第几个元素
            var n = Number(e.target.getAttribute('data-n'));
            idx=n;
            // 要跳转轮播图页面了
            carousel.style.transform='translateX(' + -16.66 * idx + '%)';
            setCircle();

        }
    };

    // 添加定时器
    var timer=setInterval(rightOnlick,2000);

    // 当鼠标进入的时候，定时器不要动
    banner.onmouseenter=function(){
        clearInterval(timer);
    }

    // 当鼠标离开的时候，要启动定时器
    banner.onmouseleave=function(){
        // 打开的时候要先删除
        clearInterval(timer);
        timer=setInterval(rightOnlick,2000);
    }
    
})();